
    var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;
    var container;
    var camera, scene, renderer;
    var particles, particle, count = 0;
    var mouseX = 0, mouseY = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    $(function () {
    init();		//初始化
    animate();	//动画效果
    // change();	//验证码
});

    //初始化
    function init() {

    container = document.createElement( 'div' );	//创建容器
    document.body.appendChild( container );			//将容器添加到页面上
    camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1500 );		//创建透视相机设置相机角度大小等
    camera.position.set(0,450,2000);		//设置相机位置

    scene = new THREE.Scene();			//创建场景
    particles = new Array();

    var PI2 = Math.PI * 2;
    //设置粒子的大小，颜色位置等
    var material = new THREE.ParticleCanvasMaterial( {
    color: 0x0f96ff,
    vertexColors:true,
    size: 4,
    program: function ( context ) {
    context.beginPath();
    context.arc( 0, 0, 0.01, 0, PI2, true );	//画一个圆形。此处可修改大小。
    context.fill();
}
} );
    //设置长条粒子的大小颜色长度等
    var materialY = new THREE.ParticleCanvasMaterial( {
    color: 0xffffff,
    vertexColors:true,
    size: 1,
    program: function ( context ) {

    context.beginPath();
    //绘制渐变色的矩形
    var lGrd = context.createLinearGradient(-0.008,0.25,0.016,-0.25);
    lGrd.addColorStop(0, '#16eff7');
    lGrd.addColorStop(1, '#0090ff');
    context.fillStyle = lGrd;
    context.fillRect(-0.008,0.25,0.016,-0.25);  //注意此处的坐标大小
    //绘制底部和顶部圆圈
    context.fillStyle = "#0090ff";
    context.arc(0, 0, 0.008, 0, PI2, true);    //绘制底部圆圈
    context.fillStyle = "#16eff7";
    context.arc(0, 0.25, 0.008, 0, PI2, true);    //绘制顶部圆圈
    context.fill();
    context.closePath();
    //绘制顶部渐变色光圈
    var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);
    rGrd.addColorStop(0, 'transparent');
    rGrd.addColorStop(1, '#16eff7');
    context.fillStyle = rGrd;
    context.arc(0, 0.25, 0.025, 0, PI2, true);    //绘制一个圆圈
    context.fill();

}
} );

    //循环判断创建随机数选择创建粒子或者粒子条
    var i = 0;
    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
    for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
    var num = Math.random()-0.1;
    if (num >0 ) {
    particle = particles[ i ++ ] = new THREE.Particle( material );
    // console.log("material")
}
    else {
    particle = particles[ i ++ ] = new THREE.Particle( materialY );
    // console.log("materialY")
}
    //particle = particles[ i ++ ] = new THREE.Particle( material );
    particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
    particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
    scene.add( particle );
}
}

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    //document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    //document.addEventListener( 'touchmove', onDocumentTouchMove, false );
    window.addEventListener( 'resize', onWindowResize, false );
}

    //浏览器大小改变时重新渲染
    function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

    function animate() {
    requestAnimationFrame( animate );
    render();
}

    //将相机和场景渲染到页面上
    function render() {
    var i = 0;
    //更新粒子的位置和大小
    for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
    particle = particles[i++];
    //更新粒子位置
    particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
    //更新粒子大小
    particle.scale.x =  particle.scale.y = particle.scale.z  = ( (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4 )*50;	//正常情况下再放大100倍*1200
}
}

    renderer.render( scene, camera );
    count += 0.1;
}


